import api from '@/api'
import { Dept } from '@/types/api'
import { Form, Input, Table, Space } from 'antd'
import { useForm } from 'antd/es/form/Form'
import { useRef, useState } from 'react'
import CreateDept from './CreateDept'
import { IAction } from '@/types/modal'
import { ColumnsType } from 'antd/es/table'
import { message, modal } from '@/utils/AntdGlobal'
import { formatDate } from '@/utils'
import { useMount } from 'ahooks'
import SearchForm from '@/components/SearchForm'
import TableBase, { TableWrap } from '@/components/TableWrap'
import AuthButton from '@/components/AuthButton'

export default function DeptList() {
  const [form] = useForm()
  const [data, setData] = useState<Dept.DeptItem[]>([])
  const deptRef = useRef<{
    open: (type: IAction, data?: Dept.EditParams | { parentId: string }) => void
  }>()

  useMount(async () => {
    getDeptList()
  })

  // 获取用户列表
  const getDeptList = async () => {
    const data = await api.getDeptList(form.getFieldsValue())
    setData(data)
  }

  const handleSubCreate = (id: string) => {
    deptRef.current?.open('create', { parentId: id })
  }

  const handleDelete = (id: string) => {
    modal.confirm({
      title: '确认',
      content: '确认删除该部门吗？',
      onOk() {
        handleDelSubmit(id)
      }
    })
  }

  // 删除提交
  const handleDelSubmit = async (_id: string) => {
    await api.deleteDept({
      _id
    })
    message.success('删除成功')
    getDeptList()
  }

  const columns: ColumnsType<Dept.DeptItem> = [
    {
      title: '部门名称',
      dataIndex: 'deptName',
      key: 'deptName',
      width: 200
    },
    {
      title: '负责人',
      dataIndex: 'userName',
      key: 'userName',
      width: 150
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
      render(updateTime) {
        return formatDate(updateTime)
      }
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render(createTime) {
        return formatDate(createTime)
      }
    },
    {
      title: '操作',
      key: 'action',
      width: 200,
      render(_, record) {
        return (
          <Space>
            <AuthButton auth='dept@create' type='text' onClick={() => handleSubCreate(record._id)}>
              新增
            </AuthButton>
            <AuthButton
              auth='dept@edit'
              type='text'
              onClick={() => {
                deptRef.current?.open('edit', record)
              }}
            >
              编辑
            </AuthButton>
            <AuthButton auth='dept@del' type='text' danger onClick={() => handleDelete(record._id)}>
              删除
            </AuthButton>
          </Space>
        )
      }
    }
  ]
  return (
    <>
      <SearchForm form={form} submit={getDeptList} reset={() => form.resetFields()}>
        <Form.Item label='部门名称' name='deptName'>
          <Input placeholder='部门名称' />
        </Form.Item>
      </SearchForm>
      <TableBase>
        <TableWrap text='部门列表'>
          <AuthButton
            auth='dept@create'
            type='primary'
            onClick={() => {
              deptRef.current?.open('create')
            }}
          >
            新增
          </AuthButton>
        </TableWrap>
        <Table bordered rowKey='_id' columns={columns} dataSource={data} pagination={false} />
      </TableBase>
      <CreateDept mRef={deptRef} update={getDeptList} />
    </>
  )
}
